<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        * {
            margin: 30px;
            padding: 0px;
        }
        /*鼠标经过*/
        
        img:hover {
            width: 600px;
            cursor: pointer;
            box-shadow: 0px 0px 50px 50px rgba(241, 9, 144, 0.685)
        }
        /*
            鼠标悬浮样式
            这里我们要用cursor属性
            cursor 属性规定要显示的光标的类型（形状）。
            1、default 默认光标(通常是一个箭头)
            2、auto 默认。浏览器设置的光标。
            3、crosshair光标呈现为十字线。
            4、pointer 光标呈现为指示链接的指针(-只手)
            5、move 此光标指示某对象可被移动。
            6、e-resize 此光标指示矩形框的边缘可被向右(东)移动。
            7、ne-resize此光标指示矩形框的边缘可被向 上及向右移动(北东)。
            8、nw-resize此光标指示矩形框的边缘可被向 上及向左移动(北西)。
            9、n-resize 此光标指示矩形框的边缘可被向上(北)移动。
            10、se-resize此光标指示矩形框的边缘可被向 下及向右移动(南东)。
            11、sw-resize此光标指示矩形框的边缘可被向 下及向左移动(南西)。
            12、s-resize 此光标指示矩形框的边缘可被向下移动(北西)。
            13、w-resize 此光标指示矩形框的边缘可被向左移动(西)。
            14、text 此光标指示文本。
            15、wait 此光标指示程序正忙(通常是一只表或沙漏)。
            16、help 此光标指示可用的帮助(通常是一个问号或-个气球)。
        */
        /*点击事件没有结束即鼠标点下没有抬去起来*/
        
        img:active {
            border-radius: 50%;
        }
    </style>

</head>

<body>
    <img src="./img/01.png" alt="" title="点击进入婚礼" width="450px">
</body>

</html>